<script setup>
//图片生成
import { ref } from "vue";
import LiaoTian from "../components/LiaoTian";
import { imageCreate } from "@/api/utils/chat";
import { formatCurrentTime } from "../tool/index.js";

const list = ref([
  {
    left: false,
    message: "你好啊！",
    date: formatCurrentTime(),
  },
]);

const send = (message, scrollToBottom) => {
  imageCreate(message).then(res => {
    console.log(res);
    const base64String = res.payload.choices.text[0].content;
    console.log(base64String, '==base64String');

    // 将消息添加到列表中
    list.value.push({
      left: false,
      message,
      date: formatCurrentTime(),
    });

    scrollToBottom && scrollToBottom();

    setTimeout(() => {
      // 后端返回的数据格式
      list.value.push({
        left: true,
        message: `<img src="data:image/png;base64,${base64String}" alt="生成的图片" />`,
        date: formatCurrentTime(),
      });

      scrollToBottom && scrollToBottom();
    }, 2000);
  }).catch(error => {
    console.error('Error during image creation:', error);
  });
};
</script>

<template>
  <LiaoTian @send="send" :list="list"></LiaoTian>
</template>

<style lang="scss" scoped>
</style>
